<template>
  <div class="box-title-wrapper">
    
    <!-- 标题 -->
    <section class="card-title">
      <span class="date-icon" @click="showCalendar"><img src="./caladar-icon.jpg" /></span>
      <span class="card-title-txt">{{ title }}</span>
    </section>

    <!-- 筛选项 -->
    <section class="filter-box">
      <ul>
        <li>
          <span class="t-title">情感：</span>
          <span class="t-content">
            <el-radio-group v-model="emotion" class="radioGroup" @change="inputChange('media')">
              <el-radio :label="''">全部</el-radio>
              <el-radio :label="1">正面</el-radio>
              <el-radio :label="0">中性</el-radio>
              <el-radio :label="-1">负面</el-radio>
            </el-radio-group>
          </span>
        </li>
        <li>
          <span class="t-title">话题：</span>
          <span class="t-content">
            <el-radio-group v-model="radio2" class="radioGroup" @change="inputChange('topic')">
              <el-radio :label="''">全部</el-radio>
              <el-radio :label="1">自定义</el-radio>
            </el-radio-group>
          </span>
        </li>
      </ul>
    </section>

    <!-- 自定义话题 搜索区域 -->
    <section class="custom-search" :class="{'custom-search-active': openLabalBoxOnoff}">
      <div class="labels-box">
        <i class="el-icon-arrow-up up-icon-btn" @click="closeSearchBox"></i>
        <el-tag type="warning" closable v-for="(it,i) in labelCheckedBox" :key="i" @close="initLabelCheckedArr(it)">{{ it.name }}</el-tag>
      </div>
      <div class="search-box">
        <el-input placeholder="回车搜索内容" suffix-icon="el-icon-search" v-model="searchContent" @keyup.enter.native="initRequestLabelList"></el-input>
      </div>
      <div class="search-content">
        <ul class="search-list">
          <li v-for="(it,i) in this.lableList" :key="i">
            <el-checkbox v-model="it.checked" @change="initCheckedArr">{{ it.name }}</el-checkbox>
          </li>
          <!-- <li class="active">
            <el-checkbox>党代会</el-checkbox>
          </li> -->
        </ul>
      </div>
    </section>
  </div>
</template>

<script>

import { mapState } from 'vuex';

export default {
  name:'card-title',
  props: ['title'],
  data(){
    return {
      emotion: '',
      radio2: '',
      labelCheckedBox: [], // 标签选中列表
      lableList: [], // 标签列表
      openLabalBoxOnoff: false, // 标签选择框
      searchContent: '',
      params:{
        emotion: '',
        labelIdStr: ''
      }
    }
  },
  created(){
    
  },  
  methods:{
    // 初始化请求标签列表
    initRequestLabelList(){
      // this.labelCheckedBox = []; // 清空
      this.lableList = []; // 清空
      this.axios.get(`${this.serverApi}/label/list`,{
        params: { name: this.searchContent }
      }).then(res => {
          if(res.data.data){
            this.lableList = res.data.data.map(v => {
              if(this.labelCheckedBox.filter(v1 => v1.id == v.id).length > 0){
                v.checked = true; 
              }else{
                v.checked = false; 
              }
              return v;
            });
          }
      })
    },
    // 初始化 标签 数组 -> 点击下面的复选框列表
    initCheckedArr(){
      // this.labelCheckedBox = []
      this.lableList.filter(v => {
        if(v.checked){
          if(this.labelCheckedBox.filter(v1 => v1.id == v.id).length == 0){
            this.labelCheckedBox.push(v);
          }
        }else{
          this.labelCheckedBox = this.labelCheckedBox.filter(v1 => v1.id != v.id)
        }
      })
      this.emitParams();
    },
    // 点击标签关闭 按钮，删除这个标签及下面列表选中
    initLabelCheckedArr(v){
      console.log(v);
      // 删除标签
      this.labelCheckedBox = this.labelCheckedBox.filter(v1 => v1.id !== v.id);
      // 列表选项 复选框 失焦
      this.lableList = this.lableList.map(v1 => { 
        if(v1.id == v.id ){
          v1.checked = false;
          return v1;
        }
        return v1;
      })
      this.emitParams();
    },
    showCalendar(){
      this.$emit('showCalendar')
    },
    // 表单 change
    inputChange(type){
      // 动画显示 标签搜索框
      if(type== 'topic'){
       this.radio2 == 1 ? this.openLabalBoxOnoff = true : this.openLabalBoxOnoff = false;
       this.radio2 == 1 ? this.initRequestLabelList() : this.lableList = [];
       if(this.radio2 == ''){
         this.labelCheckedBox = []; // 清空
         this.lableList = []; // 清空
         this.emitParams();
       }
      }else{
        this.emitParams();
      }
    },
    // 发送信息
    emitParams(){
      this.params.emotion = this.emotion;
      this.params.labelIdStr = this.labelCheckedBox.map(v => v.id).join(',');
      this.$emit('getFilterInfo',this.params);
    },
    // 关闭搜索框
    closeSearchBox(){
      this.openLabalBoxOnoff = false;
      // this.lableList = [];
    }
  },
  computed:{
    ...mapState(['serverApi','imgApi']),
  }
}
</script>

<style scoped lang="scss">
  @import "&/assets/css/index.scss";

  /* box-title-wrapper */
  .box-title-wrapper{
    width:100%;height:pxToRem(120px);position:relative;
  }

  .card-title{
    width:100%;height:pxToRem(48px);line-height:pxToRem(48px);text-align: center;font-size:pxToRem(16px);color:#fff;background-color:#c9242b;position:relative;z-index:4;
    .date-icon{
        width:pxToRem(26px);height:pxToRem(26px);position:absolute;top:pxToRem(6px);right:pxToRem(15px);cursor:pointer;
        img{width:100%;height:100%;}
    }
  }
  /* filter-box */
  .filter-box{
    width:100%;height:pxToRem(70px);background-color:#fff;position:relative;top:-5px;border-radius: 5px 5px 0 0;box-shadow:0 3px 5px #eee;justify-content:flex-start;z-index:4;
    ul{
      list-style: none;margin:0;padding:0;
      li{
        font-size:pxToRem(14px);height:pxToRem(35px);line-height:pxToRem(35px);display:flex;flex-wrap:nowrap;
        .t-title{ color:#999; width:pxToRem(65px);text-align:right;}
        .t-content{color:#222;}
        /deep/.el-radio__label{font-size:pxToRem(13px);}
        /deep/.el-radio__inner{width:pxToRem(14px);height:pxToRem(14px);}
        /deep/.el-radio__input.is-checked+.el-radio__label{color:#F6821F;}
        /deep/.el-radio__input.is-checked .el-radio__inner{border-color:#F6821F;background:#F6821F;}
        /deep/.el-radio__inner:hover{border-color:#F6821F;}
        /deep/.el-radio{margin-right:12px;}
      }
    }
  }
  /* custom-search */
  
  .custom-search{
    width:100%;height:auto;z-index:1;position:absolute;top:pxToRem(-120px);background-color:#fff;transition:all .5s ease;z-index:3;/* top:pxToRem(-40px); */
    /* labels-box  */
    .labels-box{
      width:100%;box-sizing: border-box;padding:0 pxToRem(12px);position:relative;min-height:pxToRem(30px);line-height:pxToRem(30px);border-bottom: 1px solid #E6E6E6;padding-bottom:pxToRem(10px);
      .el-icon-arrow-up{
        position: absolute;right:pxToRem(12px);top:10px;cursor: pointer;font-size:pxToRem(14px);
      }
      .el-tag{
        height:pxToRem(20px);line-height:pxToRem(20px);padding:0 pxToRem(10px);margin-left:pxToRem(8px);
      }
      .el-tag.el-tag--warning{background-color:#F6821F;border-color:#F6821F;color:#fff;}
      /deep/.el-tag.el-tag--warning .el-tag__close{background-color:#fff;}
      /deep/.el-tag .el-icon-close{border-radius: 0;width:pxToRem(12px);height:pxToRem(12px);line-height:pxToRem(12px);}
    }

    /* search-box */
    .search-box{ 
      width:100%;box-sizing: border-box;padding:0 pxToRem(12px) pxToRem(10px); 
      /deep/.el-input__inner:focus{ border-color:#F6821F; }
      /deep/.el-input__inner{height:pxToRem(34px);line-height:pxToRem(34px);}
    }

    /* search-content */
    .search-content{
      width:100%;box-sizing: border-box;border-bottom: 1px solid #E6E6E6;
      .search-list{
        list-style: none;margin:0;padding:0;max-height:pxToRem(280px);overflow-x:hidden;overflow-y:auto;
        li{
          width:100%;box-sizing: border-box;height:pxToRem(30px);margin-top:pxToRem(2px);line-height:pxToRem(30px);padding:0 pxToRem(12px); 
          .el-checkbox{ display: inherit; color:#222; }
          /deep/.el-checkbox__input.is-checked+.el-checkbox__label{color:#F6821F;}
          /deep/.el-checkbox__input.is-checked .el-checkbox__inner{background-color:#F6821F;border-color:#F6821F;}
          /deep/.el-checkbox__inner:hover{border-color:#F6821F;}
          /deep/.el-checkbox__input.is-focus .el-checkbox__inner{border-color:#F6821F;}
          &.active{
            background-color:#E6E6E6;
          }
        }
      }
    }

  }
  .custom-search-active{top:pxToRem(120px);}
</style>